<template>
	<view @click="handleNavigation" class="navgtion">
		<u-icon name="map-fill" size="22" color="#45bc1b"></u-icon></u-icon>
		<text>{{$t('Navigation')}}</text>
	</view>
</template>

<script>
	export default {
		props: ['location'],
		data() {
			return {
				// 目标纬度
				latitude: '39.458112',
				// 目标经度
				longitude: '76.001274',
				// 目标地址名称
				name: '艾力',
				// 目标地址详细信息
				address: '',
				// 我自己的位置经纬度（百度地图需要传入自己的经纬度进行导航）
				selfLocation: {
					latitude: '',
					longitude: ''
				}
			}
		},
		methods: {
			handleNavigation() {
				const _this = this
				if (!this.location.latitude || !this.location.longitude || !this.location.name) return
				console.log(12, this.location)
				// 微信
				// #ifdef MP-WEIXIN
				let _obj = {
					latitude: parseFloat(this.location.latitude),
					longitude: parseFloat(this.location.longitude),
					name: this.location.name,
				}
				if (this.address) {
					_obj['address'] = this.address
				}
				uni.openLocation({
					..._obj,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
				// #endif

				// #ifdef APP-PLUS
				// 判断系统安装的地图应用有哪些, 并生成菜单按钮
				let _mapName = [{
						title: '高德地图',
						name: 'amap',
						androidName: 'com.autonavi.minimap',
						iosName: 'iosamap://'
					},
					{
						title: '百度地图',
						name: 'baidumap',
						androidName: 'com.baidu.BaiduMap',
						iosName: 'baidumap://'
					},
					{
						title: '腾讯地图',
						name: 'qqmap',
						androidName: 'com.tencent.map',
						iosName: 'qqmap://'
					},
				]
				// 根据真机有的地图软件 生成的 操作菜单
				let buttons = []
				let platform = uni.getSystemInfoSync().platform
				platform === 'android' && _mapName.forEach(item => {
					if (plus.runtime.isApplicationExist({
							pname: item.androidName
						})) {
						buttons.push(item)
					}
				})
				platform === 'ios' && _mapName.forEach(item => {
					console.log(item.iosName)
					if (plus.runtime.isApplicationExist({
							action: item.iosName
						})) {
						buttons.push(item)
					}
				})
				if (buttons.length) {
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: buttons
					}, function(e) {
						let _map = buttons[e.index - 1]
						_this.openURL(_map, platform)
					})
				} else {
					uni.showToast({
						title: '请安装地图软件',
						icon: 'none'
					})
					return
				}
				// #endif
			},

			// 打开第三方程序实际应用
			openURL(map, platform) {
				let _defaultUrl = {
					android: {
						"amap": `amapuri://route/plan/?sid=&did=&dlat=${this.location.latitude}&dlon=${this.location.longitude}&dname=${this.location.name}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.location.name}&tocoord=${this.location.latitude},${this.location.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.location.name}|latlng:${this.location.latitude},${this.location.longitude}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`
					},
					ios: {
						"amap": `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${this.location.latitude}&dlon=${this.location.longitude}&dname=${this.location.name}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.location.name}&tocoord=${this.location.latitude},${this.location.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.location.name}|latlng:${this.location.latitude},${this.location.longitude}&mode=driving&src=ios.baidu.openAPIdemo`
					}
				}
				let newurl = encodeURI(_defaultUrl[platform][map.name]);
				console.log(newurl)
				plus.runtime.openURL(newurl, function(res) {
					console.log(res)
					uni.showModal({
						content: res.message
					})
				}, map.androidName ? map.androidName : '');
			}

		},
	}
</script>
<style lang="scss" scoped>
	.navgtion {
		width: 100%;
		display: flex;
		align-items: center;
		color: $uni-color-topic;
		padding: 10rpx 5rpx ;
	}
</style>